<template>
  <div id="app">
    <ul class="router-ul">
      <router-link v-for="link in links" :key="link.to" tag="li" active-class="activeClass" :to="link.to">{{link.title}}</router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      links: [
        {to: '/multiView', title: 'multiView'},
        {to: '/olmap', title: 'olmap'},
        {to: '/controls', title: 'controls'},
        {to: '/heatmap', title: 'heatmap'},
      ]
    }
  },
  components: {
  }
}
</script>

<style>
.router-ul{
  display: flex;
  list-style: none;
  justify-content: space-around;
}
.router-ul li{
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px 5px;
  margin: 0 5px;
  cursor: pointer;
}
li.activeClass {
  background-color: #42b983;
}
</style>
